<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>大数据分析</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<!--[if IE 7]>
		<link rel="stylesheet" href="css/font-awesome-ie7.min.css" />
		<![endif]-->
		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" href="css/com.css" />
		<link rel="stylesheet" href="css/humanAnalysis.css" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/echarts.js"></script>

		<!--html5shiv.js和respond.min.js是为了让IE8支持HTML5的新标签以及CSS3里的媒体查询-->
		<!--[if lt IE 9]>
		<script type="text/javascript" src="js/html5shiv.js"></script>
		<script type="text/javascript" src="js/respond.min.js"></script>
		<![endif]-->
	</head>
	<body class="bg">
		<!--应用详情主体-->
		<div class="container-fluid content-wrap">
			<div class="app-content">
			    <div class="row">
			    	<div class="menu">
			    		<!--<span class="logo fa fa-navicon" title="菜单目录"></span>-->
						
						<ul class="menu-list w35 pull-left" >
							<li class="choose"><a class="list-item" href="humanAnalysis.html" title="人口分析">人口分析</a></li>
							<li><a class="list-item" href="legalPersonAnalysis.html" title="法人分析">法人分析</a></li>
							<li><a class="list-item" href="macroAnalysis.html" title="宏观经济">宏观经济</a></li>
						</ul>
						<h4 class="title"><span>连云港城市运营监控分析</span></h4>
						<span class="amplify pull-right"><img src="img/enlarge.png/" alt="" /></span>
						<ul class="menu-list w30 pull-right" >
							<li class="choose"><a class="list-item" href="specialAnalysis.html" title="专题分析">专题分析</a></li>
							<li><a class="list-item" href="enterpriseCloud.html" title="企业云图">企业云图</a></li>
							<li><a class="list-item" href="majorProject.html" title="重大项目">重大项目</a></li>
							<li><a class="list-item" href="index.html" title="招商引资">招商引资</a></li>
							
						</ul>
			    	</div>
			    	
			    	<div class="content-list-wrap">
				    	<div class="content-list">
				    		<div class="content-left">
				    			<div class="leftBox h15">

				    				<div class="itemList">
				    					<i class="topLeft"></i>
					    				<i class="topRight"></i>
					    				<i class="bottomRight"></i>
					    				<i class="bottomLeft"></i>
				    					<div class="chartwrap w100">
				    						<ul class="listWrap">
				    							<li>
				    								<img src="img/man.png" alt="" />
				    								<span class="fs05">全市总人口（万）</span>
				    								<span class="fs12 c2">451.8</span>
				    							</li>
				    							<li>
				    								<img src="img/man.png" alt="" />
				    								<span class="fs05">户籍人数（万）</span>
				    								<span class="fs12 c2">351.8</span>
				    							</li>
				    							<li>
				    								<img src="img/man.png" alt="" />
				    								<span class="fs05">流动人口（万）</span>
				    								<span class="fs12 c2">71.83</span>
				    							</li>
				    						</ul>
				    					</div>
				    				</div>
				    			</div>
				    			<div class="leftBox h45">
				    				<h5>人口教育结构</h5>
				    				<div class="itemList">
				    					<i class="topLeft"></i>
					    				<i class="topRight"></i>
					    				<i class="bottomRight"></i>
					    				<i class="bottomLeft"></i>
					    				<div class="personWrap">
					    					<div class="chartwrap w100">
					    						<div class="education">
					    							<div class="edLeft">
					    								<span class="glyphicon glyphicon-list-alt"></span>
					    								<span>在读学生人数</span>
					    							</div>
					    							<div class="edRight">
					    								<span class="fr"><b class="c2">82.5</b>万人</span>
					    							</div>
					    						</div>
					    						<div class="education">
					    							<div class="edLeft">
					    								<span class="glyphicon glyphicon-list-alt"></span>
					    								<span>在校学生人数比例</span>
					    							</div>
					    							<div class="edRight">
					    								<span class="fr"><b class="c2">18.95</b>%</span>
					    							</div>
					    						</div>
					    					</div>
				    						<div class="chartwrap h65" id="personEducation"></div>
					    				</div>

				    				</div>
				    			</div>
				    			<div class="leftBox h35">
									<h5>人口性别年龄结构</h5>
				    				<div class="itemList">
				    					<i class="topLeft"></i>
					    				<i class="topRight"></i>
					    				<i class="bottomRight"></i>
					    				<i class="bottomLeft"></i>
					    				<div class="personWrap">
					    					<div class="chartwrap w55" id="populationStructure"></div>
					    					<div class="chartwrap w40">
					    						<div class="personItem bd1 bg-c-o-1">
					    							<div class="itemLeft bg-c-1">
					    								<img src="img/man.png" alt="" />
					    								<span>男性</span>
					    							</div>
					    							<div class="itemRight">
					    								<span class="b">224.5万</span>
					    								<span>占50.7%</span>
					    							</div>
					    						</div>
					    						<div class="personItem bd2 bg-c-o-2">
					    							<div class="itemLeft bg-c-2">
					    								<img src="img/woman.png" alt="" />
					    								<span>女性</span>
					    							</div>
					    							<div class="itemRight">
					    								<span class="b">212.5万</span>
					    								<span>占49.3%</span>
					    							</div>
					    						</div>
					    					</div>
					    				</div>
				    					
				    				</div>
				    			</div>
				    		</div>
				    		<div class="content-middle">
				    			<div class="midItem mt10">
				    				<div class="itemList">
				    					<i class="topLeft"></i>
					    				<i class="topRight"></i>
					    				<i class="bottomRight"></i>
					    				<i class="bottomLeft"></i>
					    				<div class="inOutTab">
					    					<ul class="list">
					    						<li><span att="in">人口迁入情况</span></li>
					    						<li><span att="out">人口迁出情况</span></li>
					    					</ul>
					    				</div>
					    				<div class="InOutBox">
					    					<div class="chartwrap" id="flowIn"></div>
				    						<div class="chartwrap hidden" id="flowOut"></div>
					    				</div>
				    					
				    				</div>
				    			</div>
				    			<div class="midItem">
									<h5>地区少数民族分布</h5>
				    				<div class="itemList">
				    					<i class="topLeft"></i>
					    				<i class="topRight"></i>
					    				<i class="bottomRight"></i>
					    				<i class="bottomLeft"></i>
				    					<div class="chartwrap" id="minoritiDistribute"></div>
				    				</div>
				    			</div>
				    			
				    		</div>
				    		<div class="content-right">
				    			<div class="rightBox h15">

				    				<div class="chartBox" >
				    					<i class="topLeft"></i>
					    				<i class="topRight"></i>
					    				<i class="bottomRight"></i>
					    				<i class="bottomLeft"></i>
					    				<div class="chartwrap w100">
				    						<ul class="listWrap">
				    							<li>
				    								<img src="img/man.png" alt="" />
				    								<span class="fs05">人口增长</span>
				    								<span class="fs12 c2">10.34‰</span>
				    							</li>
				    							<li>
				    								<img src="img/man.png" alt="" />
				    								<span class="fs05">人口死亡</span>
				    								<span class="fs12 c2">5.24‰</span>
				    							</li>
				    							<li>
				    								<img src="img/man.png" alt="" />
				    								<span class="fs05">自然增长</span>
				    								<span class="fs12 c2">3.34‰</span>
				    							</li>
				    						</ul>
				    					</div>
				    				</div>
				    			</div>
				    			<div class="rightBox h45">
									<h5>特殊人群信息</h5>
				    				<div class="chartBox" >
				    					<i class="topLeft"></i>
					    				<i class="topRight"></i>
					    				<i class="bottomRight"></i>
					    				<i class="bottomLeft"></i>
					    				<div class="specialPerson">
					    					<div class="chartwrap w35">
					    						<div class="specialSum">
					    							<img src="img/man.png" alt="" />
				    								<span class="fs05">特殊人群总人数</span>
				    								<span class="bd1 br15 fs12"><b>1838</b></span>
				    								<span class="fs05">占总人口<b class="fs12 c2">4.34‰</b></span>
					    						</div>
					    					</div>
					    					<div class="chartwrap w60" id="specialDestribute"></div>
					    				</div>
					    				
				    				</div>
				    			</div>
				    			<div class="rightBox h35">
									<h5>重点人群情况</h5>
				    				<div class="chartBox h87">
				    					<i class="topLeft"></i>
					    				<i class="topRight"></i>
					    				<i class="bottomRight"></i>
					    				<i class="bottomLeft"></i>
					    				<div class="chartwrap">
					    					<div class="circle_bg"></div>
					    					<ul class="importantPerson">
				    							<li class="p-t-l">
				    								<span class="title_im">空巢老人</span>
				    								<div class="item_im">
				    									<img src="img/man.png" alt="" />
				    									<span class="b">2431</span>
				    								</div>
				    								
				    							</li>
				    							<li class="p-t-r">
				    								<span class="title_im">留守儿童</span>
				    								<div class="item_im">
				    									<img src="img/man.png" alt="" />
				    									<span class="b">2431</span>
				    								</div>
				    							</li>
				    							<li class="p-b-l">
				    								<span class="title_im">侨胞</span>
				    								<div class="item_im">
				    									<img src="img/man.png" alt="" />
				    									<span class="b">2431</span>
				    								</div>
				    							</li>
				    							<li class="p-b-r">
				    								<span class="title_im">低保</span>
				    								<div class="item_im">
				    									<img src="img/man.png" alt="" />
				    									<span class="b">2431</span>
				    								</div>
				    							</li>
				    						</ul>
					    				</div>
				    				</div>
				    			</div>
				    		</div>
				    		
				    	</div>
			    	</div>
			    </div>
				
			</div>
		</div>
		<!--应用详情主体-->
		<!--<script src="js/common.js"></script>-->
		<script src="js/china.js"></script>
		<script src="js/humanAnalysis.js"></script>

		<script>
			$(function(){
				$(".List li").on("click",function(){
					$(this).addClass("active").siblings().removeClass("active");
				});
				$(".inOutTab span").on("click",function(){
					var att = $(this).attr("att");
					if(att=='in'){
						$(".InOutBox .chartwrap").eq(0).removeClass("hidden").siblings().addClass("hidden");
					}else if(att=='out'){
						$(".InOutBox .chartwrap").eq(1).removeClass("hidden").siblings().addClass("hidden");
					}
				})
			})
		</script>
	</body>
</html>
